<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">领券中心</block>
		</cu-custom>
		<view class="padding" v-if="list.length > 0 || pageLoading">
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-for="(item, index) in list" :key="index">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="text-sm">￥</text>
						<text class="number text-bold">{{ item.money }}</text>
					</view>
					<view class="text-red text-sm">
						最高可减
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							{{ item.title }}
						</view>
						<view class="min text-gray">
							<text v-if="item.valid_type == 'DAY'">
								领取后{{ item.valid_day }}日内有效
							</text>
							<text v-else-if="item.valid_type == 'TIME'">
								有效期至{{ item.valid_time[1] }}
							</text>
						</view>
					</view>
					<view class="linqu">
						<template v-if="item.is_receive===2">
							<button class="cu-btn bg-green sm round shadow" @tap="$utils.$page.switch('/pages/index/index')">去使用</button>
						</template>
						<template v-else-if="item.is_receive===1">
							<button class="cu-btn bg-grey sm round shadow">{{item.receive_tips}}</button>
						</template>
						<template v-else-if="item.num<=0">
							<button class="cu-btn bg-grey sm round shadow">已领完</button>
						</template>
						<template v-else-if="item.is_receive===0">
							<button class="cu-btn china-btn-bg sm round shadow bg-white"
								@click="receive(item)">立即领取</button>
						</template>
					</view>
				</view>

			</view>
		</view>
		<emptyData type="notOrder" top="10" v-else text="暂无优惠券"></emptyData>

		<loading v-if="pageLoading" />

	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: false,
			list: [
			]
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			this.pageLoading = true;
			this.$utils.$api.Coupon.receiveList().then(data => {
				this.list = data;
			}).catch(() => { }).finally(() => {
				this.pageLoading = false;
			})
		},
		receive(item) {
			if (this.$store.getters.hasLogin) {
				this.pageLoading = true;
				this.$utils.$api.Coupon.receive(item.id).then(() => {
					this.$utils.$message.success('领取成功');
					this.getList();
				}).catch((err) => {
					this.$utils.$message.error(err.msg);
				}).finally(() => {
					this.pageLoading = false;
				})
			} else {
				this.$utils.$page.open('/pages/login/login')
			}
		}
	}
}
</script>

<style lang="less" scoped>
.item {
	display: flex;
	align-items: center;
	position: relative;

	.money-text {
		width: 170upx;

		.money {
			.number {
				font-size: 40upx;
			}
		}
	}

	.right {
		flex: 1;
		justify-content: space-between;

		.nameBox {
			.name {
				font-size: 30upx;
			}

			.min {
				font-size: 24upx;
			}
		}
	}
}

.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	background-color: #f5f5f7;
	width: 20upx;
	height: 20upx;
}

.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
	border-radius: 50% 50% 0 0;
	/* 底部两个半圆 */
}

.cu-btn {
	white-space: nowrap;
}
</style>
